<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../lib/css/style.css">
    <script src="../lib/jquery/jquery.js"></script>
    <link rel="stylesheet" href="../lib/jstree/themes/default/style.min.css">
    <script src="../lib/layer/layer.js"></script>
    <!--    <link rel="stylesheet" href="../lib/bootstrap-table/bootstrap-table.min.css">-->
    <!--    <script src="../lib/bootstrap-table/bootstrap-table.min.js"></script>-->
    <!--    <script src="../lib/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>-->
    <script src="../lib/jstree/jstree.js"></script>
    <style>
        html,body,#app{
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            margin: 0 !important;
            padding: 0 !important;
            box-sizing: border-box;
        }
        #app{
            display: flex;
            flex-direction: row;
            padding: 10px !important;
        }
        #jstree_demo, #dataList{
            height: 100%;
        }
        .fa-folder-o{
            color: #f90;
        }
        .fa-file-o{
            color: #00a0e8;
        }
        .manager-box{
            display: flex; flex-direction: row; align-items: center
        }
        #dataList{
            /*overflow: auto;*/
        }
    </style>
    <link rel="stylesheet" href="../lib/font/css/font-awesome.css">
    <link rel="stylesheet" href="../lib/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../lib/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css">
    <script src="../lib/vue/vue.js"></script>
</head>
<body>
<div id="app">
    <div>
        <div id="jstree_demo" style="overflow:auto; min-width: 200px">

        </div>
    </div>
    <div id="dataList" style="flex:1; padding-left: 10px;">
        <iframe v-if="url !== null" :src="url" frameborder="0" style="width: 100%;height: 100%;" scrolling="yes"></iframe>
    </div>
</div>
</body>
</html>
<script>
    var timer = null;
    var app = new Vue({
        el:"#app",
        data:{
            searchKey: "",
            data:{
            },
            targetId : null,
            url: null,
        },
        watch:{
            searchKey: function (val) {
                var ins = $('#jstree_demo').jstree(true);
                ins.search(val, false, true);
            }
        },
        methods:{
            onEdit(item){
                console.log(item);
                var node,par;
                if(node = ins.get_node(item._id)){
                    ins.rename_node(node, item.name)
                }
                else if(par = ins.get_node(item.pid)){
                    var n = ins.create_node(par, {
                        type: "report",
                        id: item._id,
                        text: item.name
                    });
                    ins.open_node(par);
                }
                this.url = null;
            },
            getPreviewUrl(){
                return "./preview.html?v=" + Math.random();
            },
            init: function () {
                var t = this;
                $.get("/api/bpm/report/list",  function (msg) {
                    layer.closeAll();
                    if(!msg.success){
                        return
                    }
                    msg = msg.data;
                    if(msg.length){
                        msg.forEach(e => e.state = {opened: true})
                        // msg[0].state = {
                        //     "opened": true
                        // }
                    }

                    $('#jstree_demo').jstree({
                        "core" : {
                            "animation" : 0,
                            "check_callback" : true,
                            "themes" : { "stripes" : true },
                            'data' :[
                                {
                                    'id' : 'top',
                                    'text' : '全部分类',
                                    "type":"home",
                                    'state' : { 'opened' : true, 'selected' : true },
                                    'children' : (msg)
                                }
                            ]
                        },
                        "types" : {
                            // "#": {
                            //     icon: "glyphicon glyphicon-book",
                            //     valid_children: ["home"]
                            // },
                            "home": {
                                icon: "fa fa-home",
                                valid_children: ["cat"]
                            },
                            "cat": {
                                icon: "fa fa-folder-o",
                                valid_children: ["report"]
                            },
                            "report": {
                                icon: "fa fa-file-o",
                                valid_children: []
                            }
                        },
                        // "#" : {
                        //     "max_children" : 1,
                        //     "max_depth" : 4,
                        //     "valid_children" : ["root"]
                        // },
                        // "root" : {
                        //     "icon" : "/static/3.3.8/assets/images/tree_icon.png",
                        //     "valid_children" : ["default"]
                        // },
                        // "default" : {
                        //     "valid_children" : ["default","file"]
                        // },
                        // "file" : {
                        //     "icon" : "glyphicon glyphicon-file",
                        //     "valid_children" : []
                        // }
                        // },
                        "plugins" : [
                            // "contextmenu",
                            // "search",
                            // "state",
                            // "dnd",
                            "types",
                            "wholerow"
                        ]
                    });

                    window.ins = $('#jstree_demo').jstree();
                    // ins.open_all();
                    //选中第一个节点
                    // loadFormList('top')

                    $("#jstree_demo")
                        .on("rename_node.jstree", function (e,n) {
                            var name = n.text;
                            if(n.node.type != 'home'){
                                $.get("/api/bpm/report/rename", {id: n.node.original.id, name: name, type: n.node.type});
                            }
                        })
                        .on("select_node.jstree", function (e,n) {
                            var id = n.node.id;
                            if(!id){
                                return
                            }
                            if(n.node.type != 'report'){
                                return;
                            }
                            t.url = "";
                            t.$nextTick(() => t.url = t.getPreviewUrl() + "&id=" + n.node.id);
                        })
                    //     .on("move_node.jstree", function (e,d) {
                    //     $.get("/api/bpm/org/move",{id: d.node.id, pid: d.parent})
                    // });;
                }, "json");
            }
        },
        mounted: function () {
            this.init()
        }
    });

</script>